<template>
  <div>
    <div class="read-box">
      <div class="read-box-bg">
        <div class="read-content">
          <div class="read-content-title"></div>
          <div class="read-content-item">
            <ul class="read-content-list">
              <li class="read-content-list-unit read-content-unit-time">
                <div class="progress-mark progress-mark-amaz" v-if=" timeLength >= markShowValue[2].amazing"></div>
                <div class="progress-mark progress-mark-good"
                     v-if=" timeLength >= markShowValue[0].good && timeLength < markShowValue[1].great"></div>
                <div class="progress-mark progress-mark-great"
                     v-if="timeLength >=  markShowValue[1].great && timeLength < markShowValue[2].amazing"></div>
                <div class="progress-wrap">
                  <div class="progress-box">
                    <div class="progress-item-bg">
                      <div class="progress-item-active" v-bind:style="{'width':timeLength +'%'}">
                        <span class="progress-item-active-text"
                              v-bind:class="{'progress-active-text-color':timeLength < 45}">{{readData.myspeaktime}}分钟</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="progress-text">累计时长</div>
                <div class="progress-total">
                  <span class="progress-item-total-text">{{readData.classtime}}分钟</span>
                </div>
              </li>
              <li class="read-content-list-unit read-content-unit-day">
                <div class="progress-mark progress-mark-amaz" v-if=" dayLenght >= markShowValue[2].amazing"></div>
                <div class="progress-mark progress-mark-good"
                     v-if=" dayLenght >= markShowValue[0].good && dayLenght < markShowValue[1].great"></div>
                <div class="progress-mark progress-mark-great"
                     v-if="dayLenght >=  markShowValue[1].great && dayLenght < markShowValue[2].amazing"></div>
                <div class="progress-wrap">
                  <div class="progress-box">
                    <div class="progress-item-bg">
                      <div class="progress-item-active" v-bind:style="{'width':dayLenght+'%'}">
                        <span class="progress-item-active-text"
                              v-bind:class="{'progress-active-text-color':dayLenght < 30}">{{readData.mysign }}天</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="progress-text">累计打卡</div>
                <div class="progress-total">
                  <span class="progress-item-total-text">{{readData.classsign}}天</span>
                </div>
              </li>
              <li class="read-content-list-unit read-content-unit-star">
                <div class="progress-mark progress-mark-amaz" v-if=" starCount >= markShowValue[2].amazing"></div>
                <div class="progress-mark progress-mark-good"
                     v-if=" starCount >= markShowValue[0].good && starCount < markShowValue[1].great"></div>
                <div class="progress-mark progress-mark-great"
                     v-if="starCount >= markShowValue[1].great && starCount < markShowValue[2].amazing"></div>
                <div class="progress-wrap">
                  <div class="progress-box">
                    <div class="progress-item-bg">
                      <div class="progress-item-active" v-bind:style="{'width':starCount+'%'}">
                          <span class="progress-item-active-text"
                                v-bind:class="{'progress-active-text-color':starCount <30}">
                              <i class="progress-star-count"></i>
                            {{readData.mystar}}
                          </span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="progress-text">累计星星</div>
                <div class="progress-total">
                   <span class="progress-item-total-text">
                     {{readData.classtar}}
                  <i class="progress-star-count"></i></span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: ['readData'],
    data () {
      return {
        markShowValue: [  // 标志出现的标准值
          {
            good: 60
          }, {
            great: 70
          }, {
            amazing: 80
          }
        ]
      }
    },
    computed: {
      timeLength () {
        return this.readData.myspeaktime / this.readData.classtime * 100
      },
      dayLenght () {
        return this.readData.mysign / this.readData.classsign * 100
      },
      starCount () {
        return this.readData.mystar / this.readData.classtar * 100
      }
    }
  }
</script>

<style type="text/css" scoped>
  .progress-star-count {
    display: inline-block;
    width: 0.2rem;
    height: 0.2rem;
    font-style: normal;
    background: url("../assets/img/star_w.png") no-repeat;
    background-size: 100% 100%;
  }

  .progress-item-total-text {
    display: block;
    color: #fff;
    text-align: left;
    padding-left: 0.14rem;
    line-height: 0.4rem;
    font-size: 0.2rem;
  }

  .progress-total {
    float: left;
    width: 2.48rem;
    height: 0.4rem;
    background: linear-gradient(left, #ffdd00, #fd8f00);
    border-radius: 0.2rem;
    margin-top: 0.46rem;
  }

  .progress-text {
    float: left;
    margin: 0.46rem 0.1rem 0 0.1rem;
  }

  .progress-mark-good {
    margin-left: .3rem;
    width: 1.03rem;
    background: url("../assets/img/stage_good.png") no-repeat;
    background-size: 100% 100%;
  }

  .progress-mark-great {
    margin-left: .3rem;
    width: 1.03rem;
    background: url("../assets/img/stage_great.png") no-repeat;
    background-size: 100% 100%;
  }

  .progress-mark-amaz {
    margin-right: 1.2rem;
    width: 1.44rem;
    background: url("../assets/img/stage_amazing.png") no-repeat;
    background-size: 100% 100%;
  }

  .progress-mark {
    position: absolute;
    top: 0;
    left: 0;
    height: 0.4rem;
    font-size: 0.24rem;

  }

  .progress-item-active-text {
    display: block;
    color: #fff;
    text-align: right;
    padding-right: 0.14rem;
    line-height: 0.4rem;
    font-size: 0.2rem;
  }

  .progress-item-active {
    position: absolute;
    right: 0;
    /*width: 1.96rem;*/
    height: 0.4rem;
    background: linear-gradient(right, #ffdd00, #fd8f00);
    border-radius: 0.2rem;
  }

  .progress-item-bg {
    position: relative;
    width: 2.48rem;
    height: 0.4rem;
    background-color: #ffecd3;
    border-radius: 0.2rem;
  }

  .progress-box {
    padding-left: 0.25rem;
    width: 100%;
    box-sizing: border-box;
  }

  .progress-wrap {
    float: left;
    width: 2.7rem;
    margin-top: .46rem;
  }

  .read-content-list-unit {
    padding-bottom: .3rem;
    position: relative;
    overflow: hidden;
  }

  .read-content-list {
    width: 100%;
  }

  .read-content-item {
    width: 100%;
    padding: 0.18rem 0 0 0.24rem;
    font-size: 0.28rem;
    font-weight: 500;
    color: #333;
  }

  .read-content-title {
    margin: 0.2rem auto 0;
    width: 6.07rem;
    height: 1.75rem;
    background: url("../assets/img/stage_read.png") no-repeat;
    background-size: 100% 100%;
  }

  .read-content {
    padding-top: 1px;
    width: 100%;
    height: 5.98rem;
    background: url("../assets/img/stage_unit_bg.png") repeat;
    background-size: 0.22rem 0.22rem;
    border-radius: 0.12rem;
    box-shadow: 0px 1px 3px -1px #999;
  }

  .read-box-bg {
    padding: 0.96rem 0.2rem 0 0.2rem;
    background: url("../assets/img/read_bg.png") no-repeat;
    background-size: 100% 0.5rem;
    box-sizing: border-box;
  }

  .read-box {
    width: 100%;
    height: 7.45rem;
    box-sizing: border-box;
    background-color: #ffd22a;
  }

  .progress-active-text-color {
    text-align: right;
    width: 1.4rem;
    color: #e02727;
    position: absolute;
    right: 0;
  }
</style>

